<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AutoComplete</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--    引入jquery     -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="../assets/css/siderbar.css" rel="stylesheet">
    <script src="../assets/js/sidebar.js"></script>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../assets/css/unpkg/swiper.min.css">
    <!-- Swiper JS -->
    <script src="../assets/js/unpkg/swiper.min.js"></script>
</head>

<style>

</style>

<body>
    <div id="sidebar">
        <div style="height: 100%;width: 100%;">
            <div class="sidebar-title">
                <p id="sidebar-title">黄鹤楼</p>
            </div>
            <div class="sidebar-summary">
                <p id="sidebar-summary-title">概述</p>
                <hr>
                <div id="sidebar-summary">
                    <p id="sidebar-summary-content">
                        黄鹤楼位于湖北省武汉市长江南岸的武昌蛇山之巅，濒临万里长江，是国家5A级旅游景区，“江南三大名楼”之一，自古享有“天下江山第一楼“和”天下绝景“之称。黄鹤楼是武汉市标志性建筑，与晴川阁、古琴台并称“武汉三大名胜”。
                    </p>
                    <img id="sidebar-summary-arrow" src="../assets/css/bootstrap/icons/chevron-right.svg" />
                </div>
            </div>
            <hr>
            <div class="sidebar-gallery">
                <p id="sidebar-gallery-title">相册</p>
                <hr>
                <p class="sidebar-gallery-images">
                    <img class="sidebar-gallery-img" src="../assets/img/yellow-tower.jpeg" />
                    <img class="sidebar-gallery-img sidebar-gallery-img-right"
                        src="../assets/img/yellow-tower-2.jpeg" />
                    <img class="sidebar-gallery-img sidebar-gallery-img-right" src="../assets/img/yueyang-tower.jpeg" />
                    <img class="sidebar-gallery-img sidebar-gallery-img-right" src="../assets/img/yueyang-tower.jpeg" />
                </p>
            </div>
        </div>
        <div id="sidebar-second-level" class="sidebar-second-level-hide">
            <div>
                <p id="sidebar-second-level-title">详情</p>
                <div class="sidebar-second-level-back">
                    <img style="width: 16px;height: 16px;" src="../assets/css/bootstrap/icons/chevron-left.svg" />
                    <p>返回</p>
                </div>
            </div>
            <hr>
            <p id="sidebar-second-level-content">
                巍峨耸立于武昌蛇山的黄鹤楼，享有“天下绝景”的盛誉，与湖南岳阳楼，江西滕王阁并称为“江南三大名楼”。黄鹤楼始建于三国时期吴黄武二年（公元223年），传说是为了军事目的而建，孙权为实现“以武治国而昌”（“武昌”的名称由来于此），筑城为守，建楼以嘹望。至唐朝，其军事性质逐渐演变为著名的名胜景点，历代文人墨客到此游览，留下不少脍炙人口的诗篇。唐代诗人崔颢一首“昔人已乘黄鹤去，此地空余黄鹤楼”已成为千古绝唱，更使黄鹤楼名声大噪。黄鹤楼的形制自创建以来，各朝皆不相同，但都显得高古雄浑，极富个性。从楼的纵向看各层排檐与楼名直接有关，形如黄鹤，展翅欲飞，整座楼的雄浑之中又不失精巧，富于变化的韵味和美感。
            </p>
        </div>
        <div id="gallery" class="gallery-hide">
            <div class="gallery-title">
                <div id="gallery-back">
                    <img style="width: 32px; height: 32px;"
                        src="../assets/css/bootstrap/icons/chevron-left-white.svg" />
                    <p style="margin: 0;display: inline; font-size: 1rem;">返回</p>
                </div>
            </div>
            <div class="gallery-carousel">
                <div id="gallery-carousel" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>

                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
            </div>

            <div class="gallery-thumbs">
                <div id="gallery-thumbs" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-thumbs-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>



    <script>
        var secondLevel = document.getElementById("sidebar-second-level");
        var secondLevelBack = document.getElementsByClassName("sidebar-second-level-back")[0];
        secondLevelBack.addEventListener("click", function () {
            //隐藏二级页面
            secondLevel.classList.remove("sidebar-second-level-show");
            secondLevel.classList.add("sidebar-second-level-hide");
            //清空二级页面内容
        });

        var summary = document.getElementById("sidebar-summary");
        summary.addEventListener("click", function () {
            //显示二级页面
            secondLevel.classList.remove("sidebar-second-level-hide");
            secondLevel.classList.add("sidebar-second-level-show");
            //发送网络请求

            //刷新二级界面
        });

        var galleryThumbs = new Swiper('#gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 6,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });

        var galleryCurousel = new Swiper('#gallery-carousel', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });

        document.getElementById("gallery-back").addEventListener("click", function () {
            var gallery = document.getElementById("gallery");
            gallery.classList.remove("gallery-show")
            gallery.classList.add("gallery-hide");
        });

        var galleryImages = document.getElementsByClassName("sidebar-gallery-img");
        for (var i = 0; i < galleryImages.length; i++) {
            galleryImages[i].addEventListener("click", function () {
                //打开全屏图库
                var gallery = document.getElementById("gallery");
                gallery.classList.remove("gallery-hide")
                gallery.classList.add("gallery-show");
            });
        }
    </script>
</body>

</html>